<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

<script src="touch-ime.js" type="text/javascript">
</script>
<script>
/*
TouchInputMethod.set_controls(null, null, null, 
{
    'auto_clear_input_keys_on': function(mode) {
        //console.log("auto clean: %s", mode);
        mode ? this.classList.add('input_method_auto_clear_input_keys_on') :
               this.classList.remove('input_method_auto_clear_input_keys_on');
    },
    'capital_toggle_on': function(mode) {
        //console.log("capital: %s", mode);
        var txt = this.textContent;
        this.textContent = mode ? txt.toUpperCase() : txt.toLowerCase();
    }
});
*/
//TouchInputMethod.enable_engines(['en', 'pinyin', 'zhuyin', "quick"]);
TouchInputMethod.oncomposition = function() {
    console.log("show TouchInputMethod");
    document.getElementById('ime_area').style.visibility = "visible";
}

TouchInputMethod.oncompositionend = function() {
    console.log("hide TouchInputMethod");
    document.getElementById('ime_area').style.visibility = "hidden";
}
</script>

<style type='text/css'>
#input_method_keyboard {
    clear:both;
}

#input_method_show_input_keys {
    height: 1em;
}

#input_method_candidate {
    clear: both;
}

.input_method_inputkey {
    width: 2em;
    height: 2em;
}

.input_method_candidates {
    /*border: none;*/
}

.input_method_auto_clear_input_keys_on {
    border-color: red;
    background-color: red;
}

.input_method_capital_toggle_on {
    background-color: red;
}

</style>

<title>Touch Input Method Demo</title>

<textarea cols='40' rows='3' style="float:left;margin:5px;">
</textarea>
<div style="float:left;margin:5px;">
<labe>text: </labe><input type="text" /><br/>
<labe>pass: </labe><input type="password" /><br/>
<labe>mail: </labe><input type="email" /><br/>
</div>

<div id="ime_area" style="visibility: hidden;">

<div id="input_method_keyboard"><!-- required -->
</div>

<div id='input_method_show_input_keys'><!-- required -->
</div>

<div><!-- optional -->
    <div>
        <button class="input_method_back_input_key">退一字根</button>
        <button class="input_method_clear_input_keys">清除字根</button>

        <!-- bad example. -->
        <!--
        <button class="x_input_method_auto_clear_input_keys_mode">自動清除字根</button>
        -->
    </div>
    <div>
        <!--
        <button onclick='select_output_texts();'>選取輸入內容</button>
        -->
        <button class="input_method_backspace_output_texts">回刪一字</button>
        <button class="input_method_clear_output_texts">清除輸入內容</button>
        <button class="input_method_add_space_output_texts">空格</button>
        <button class="input_method_add_newline_output_texts">換行</button>
    </div>
    <div>
        <button class="input_method_auto_clear_input_keys_mode">自動清除字根</button>
        <button class="input_method_capital_toggle">Caps</button>
        <button class="input_method_switch_engine">切換</button>
        <select class="input_method_select_engine"></select>
        <button class="input_method_end_composition">結束輸入法</button>
    </div>
    <div>
        <button class="input_method_goto_next">下一欄位</button>
        <button class="input_method_goto_previous">上一欄位</button>
        <button class="input_method_select_output_texts">Select (and Copy to clipboard if support)</button>
    </div>
</div>

<div id='input_method_candidate'><!-- required -->
</div>

</div>

<button onclick="TouchInputMethod.clean_local_table();">clean local table</button>


</html>

